<template>
  <div class="bar" >
    <div ref="echarts" class="echarts" v-show="datas.list && datas.list.length">
    </div>
    <noData  v-show="!datas.list || !datas.list.length"></noData>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import noData from "./noData.vue";
  export default {
    data:()=>{
      return {
        myCharts:'',
      }
    },
    components:{
      noData
    },
    props:{
        deptName:{type:String},
        colors:{
          type:Array,
          default: ()=>{
            return ['#B1BBFF','#FFD894']
          }
        },
        datas:{
          type:Object,default: ()=>{
            return {
              list:[],legend:[],xAxisLabelArr:[]
            }
          }
        },
        title:{
          type:String,
          default:'访问量'
        },
        barwidth:{
          type:Number,
          default:0
        },
    },
    mounted() {
      this.init();
      this.setOption();
    },
    methods:{
      getList(){},
      init() {
        this.myCharts = echarts.init(this.$refs['echarts'])
        window.addEventListener('resize',()=>{ this.myCharts.resize() });
      },
      setOption(){
        this.myCharts.setOption({
          title: {
            text: this.title
          },
          tooltip: {
            trigger: 'axis',
            formatter:function(param) {
              return param[0].seriesName+' : '+param[0].value+'<br>'+param[1].seriesName+' : '+param[1].value
            }
          },
          legend: {
            data: this.datas.legend,right:'4%',top:'4%'
          },
          color:this.colors,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.datas.xAxisLabelArr
          },
          yAxis: {
            type: 'value'
          },
          series: this.datas.list
        });
      }
    },
    watch:{
      datas:{
        deep:true,
        handler(){
          this.$nextTick(() => {
            this.setOption()
            this.myCharts.resize()
          })
        }
      }
    }
  }
</script>

<style  scoped="scoped" lang="scss">
  .bar{
    height:400px;
    position: relative;
    .echarts{
      position: absolute;
      top:0px;
      left:0;
      right:0;
      bottom:0;

    }
  }

</style>
